<template>
    <div class="index clearafter">
        <module-head></module-head>
        <div class="content flex">
            <div class="w220">
                <menu-list></menu-list>
            </div>
            <div class="w980 flex_full">
              <p class="flex flex_vcenter pdb20">
                <i class="titleTag"></i>
                <span class="fRedBig">服务设置</span>
              </p>
                <div class="contain bg">
                    <div class="topblank"></div>
                    <div class="serviceset cbafter">
                        <div class="fl" v-for="(index, subitem) in servicesetlist">
                            <div class="bgdiv fl"></div>
                            <div class="fr">
                                <p class="checkboxThree">
                                    <input type="checkbox" :id="index" class="chk_3" v-model="subitem.effectiveFlag" :true-value="1" :false-value="0" :name="index" />
                                    <label :for="index" @click="changeselected(subitem)"></label>
                                </p>
                                <h3>{{subitem.serviceName}}</h3>
                                <div class="radio" @click="changefreeFlag(subitem)">
                                    <label>
                                        <input type="radio" v-model="subitem.freeFlag" value="1" :name="'f'+index" :disabled="subitem.effectiveFlag==0"> 免费
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" v-model="subitem.freeFlag" :name="'f'+index" :disabled="subitem.effectiveFlag==0" value="0"> 收费
                                        <input type="text" placeholder="请输入金额" :disabled="subitem.freeFlag==1||subitem.effectiveFlag==0" v-model="subitem.price">元/次
                                    </label>
                                </div>
                            </div>
                            <div class="cb">
                                <button class="default blue center" @click="servicesetsave(index)">保 存</button>
                            </div>
                        </div>

                        <!--   <div class="fl">
                            <div class="bgdiv2 fl"></div>
                            <div class="fr">
                                <p class="checkboxThree">
                                    <input type="checkbox" id="dhzx" class="chk_3" />
                                    <label for="dhzx"></label>
                                </p>
                                <h3>电话咨询</h3>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="optionsRadios" value="" checked> 免费
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="optionsRadios" value="option2"> 收费
                                        <input type="text" placeholder="请输入金额">元/次
                                    </label>
                                </div>
                            </div>
                            <div class="cb">
                                <button class="default blue center">保 存</button>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/reset.css'
import Public from 'assets/public.js'
import moduleHead from 'components/module-head'
import menuList from 'components/menu-list'
export default {
    data() {
            return {
                //服务设置开始
                servicesetlist: [], //当前登录医生的有资质的服务列表
                servicesetsub: { //获取当前会员开通的服务数据
                    "objectType": "031", //写死
                    "objectId": "", //当前登录医生doctorid
                    "servicedObjectType": "041", //写死 元/次对应的编号
                    "servicedObjectId": "" //mpiId
                },
               currentdoctorId:"",

            }
        },
        computed: {

        },
        components: {
            moduleHead, menuList
        },
        ready() {
            var that = this;
            // 获取当前登录医生的信息
            $.when(Public.commonajax("coms.doctorService", "getDoctorCurrent", "[]"))
                .done(function(data) {
                    that.getseivceselist(data.body.doctorId);
                    that.currentdoctorId=data.body.doctorId;

                })


        },
        methods: {
            getseivceselist(doctorId){
                 var that = this;
                // 服务设置的获取
                    $.when(Public.commonajax("coms.serviceOpenService", "queryCredentialsAndServiceOpen", "['" + '031' + "','" + doctorId + "']"))
                        .done(function(res) {
                            if (res.code == 200) {
                                $.each(res.body, function(index, el) {
                                    el.freeFlag = 0;
                                    el.effectiveFlag = 0;
                                    el.price = 0;
                                    el.priceStyleCode = "101";
                                    el.id=0;
                                    if (el.list.length > 0) {
                                        el.freeFlag = el.list[0].freeFlag;
                                        el.effectiveFlag = el.list[0].effectiveFlag;
                                        el.price = el.list[0].price;
                                        el.id= el.list[0].id;
                                    }
                                });
                                that.servicesetlist = res.body;

                            } else {
                                Public.ajaxPrompt(res.msg);
                            }

                        })
            },
            //服务设置的保存
            servicesetsave(index) {
                var that = this;
                    var temarr=[];
                    temarr.push(that.servicesetlist[index]);
                    if(temarr[0].price<0){
                         Public.ajaxPrompt("不能输入负数");
                         return
                    }
                    if(temarr[0].freeFlag==0&&temarr[0].price===""){
                         Public.ajaxPrompt("请输入收费价格");
                         return
                    }
                    if(/[^\d.]/g.test(temarr[0].price)){
                         Public.ajaxPrompt("请输入数字");
                    }
                    $.when(Public.commonajax("coms.serviceOpenService", "saveServiceOpen", '[' + JSON.stringify(temarr) + ']'))
                        .done(function(res) {
                            if (res.code == 200) {
                                Public.ajaxPrompt("保存成功");
                                 that.getseivceselist(that.currentdoctorId);

                            } else {
                               Public.ajaxPrompt("请输入正确的数字");
                            }

                        })
                },
                // 点击按钮取消免费资讯
                changeselected(subitem) {
                         subitem.price = 0;
                },
                changefreeFlag(subitem){
                     subitem.price = 0;
                }

        },
        events: {


        },
        watch: {

        },
}
$(function() {

})
</script>
<style scoped>
.topblank {
    border-radius: 10px 10px 0 0;
    height: 105px;
    background: url(../../assets/img/baner1.jpg) no-repeat center top;
}

.checkboxThree {
    width: 80px;
    height: 30px;
    margin: 10px;
    float: right
}

.chk_3 {
    display: none;
}

.chk_3 + label {
    background-color: #fafbfa;
    padding: 9px;
    border-radius: 50px;
    display: inline-block;
    position: relative;
    margin-right: 30px;
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    width: 80px;
    height: 30px;
}

.chk_3 + label:after {
    content: ' ';
    position: absolute;
    top: 0;
    -webkit-transition: box-shadow 0.1s ease-in;
    transition: box-shadow 0.1s ease-in;
    left: 0;
    width: 80px;
    height: 30px;
    border-radius: 100px;
    box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0, 0, 0, 0.4);
}

.chk_3 + label:before {
    content: ' ';
    position: absolute;
    background: white;
    top: 1px;
    left: 1px;
    z-index: 999999;
    width: 28px;
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    height: 28px;
    border-radius: 100px;
    box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0px 1px rgba(0, 0, 0, 0.3);
}

.chk_3:active + label:after {
    box-shadow: inset 0 0 0 20px #eee, 0 0 1px #eee;
}

.chk_3:active + label:before {
    width: 37px;
}

.chk_3:checked:active + label:before {
    width: 37px;
    left: 20px;
}

.chk_3 + label:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.chk_3:checked + label:before {
    content: ' ';
    position: absolute;
    left: 52px;
    border-radius: 100px;
}

.chk_3:checked + label:after {
    content: ' ';
    font-size: 1.5em;
    position: absolute;
    background: #EDC1B6;
    box-shadow: 0 0 1px #EDC1B6;
}

.serviceset {
    padding: 50px 70px;
    min-height: 537px;
}

.serviceset>div {
    width: 380px;
    height: 232px;
    border: 1px #f9f9f9 solid;
    border-radius: 5px;
    margin-top: 20px;
}
.serviceset>div:nth-child(2n) {
    margin-left: 50px;

}

.serviceset>div .fl {
    height: 170px;
    width: 120px;
}

.serviceset>div .fr {
    height: 170px;
    width: 220px;
    padding-right: 20px
}

.bgdiv {
    background: url(../../assets/img/baner2.jpg) no-repeat left 40px;
}

.bgdiv2 {
    background: url(../../assets/img/baner3.jpg) no-repeat left 40px;
}

.serviceset>div .cb {
    height: 60px;
    line-height: 60px;
    background: #EFF8FD;
    padding-top: 15px;
    border-radius: 0 05px 5px
}

.serviceset>div h3 {
    clear: both;
    color: #1dc499;
    font-size: 18px;
    padding-top: 20px
}

.serviceset input[type='text'] {
    width: 100px;
    border: 1px solid #ccc;
    padding: 1px 10px;
    margin-right: 10px
}

.radio {
    margin-top: 15px;
    margin-bottom: 15px;
}
</style>
